<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Resident</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
	<link rel="stylesheet" href="css/demo_table.css" />
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/quickforms.js"></script>
        <script src="js/jquery-ui-1.10.0.custom.min.js"></script>
		<script src="js/jquery.mobile-1.1.1.min.js"></script>
		<script src="js/jquery.dataTables.js"></script>

<script type="text/javascript">
$(function(){
	getResultSet('rpp','getVisitsRows','username='+getCookie('username'),function(data){
		if(isJSONString(data))
        {
			var json = JSON.parse(data);			
			var oTable = $('#mainData').dataTable( {
        		"bProcessing": true,
        		"iDisplayLength": 50,
        		"sPaginationType": "full_numbers",
        		"aaSorting": [[0,"desc"]],	
        		"aaData": json,
	           	"aoColumns":[     	         
					{ "sTitle": "Date",   "mData": "Date","sWidth": "12%" },
					{ "sTitle": "Age",  "mData": "Age" },
					{ "sTitle": "Gender",    "mData": "Gender" },
					{ "sTitle":"Diagnosis", "mData":"Diagnosis", "sWidth": "35%"},
					{ "sTitle": "Notes", "mData": "Notes","sWidth": "15%" },					
					{ "sTitle": "Location",  "mData": "Location","sWidth": "15%" },
					{ "sTitle": "ID",   "mData": "id" , "bVisible": false }					
					],
				"sDom":'<"top"lf<"clear">ip<"clear">>rt<"bottom"ip<"clear">' 
	       });
	
            // make the row clickable
            $('#mainData tbody tr').click( function () {
                var aData = oTable.fnGetData( this );
                //alert( aData.id ); // assuming the id is in the first column
                window.location = aData.form+".html?id="+ aData.id;
            } );
                       
        } else
 		{
			$('#mainData').remove();
            alertJSONError(data);
        }
	});
});

</script>
</head>
<!--  
<body onload="loadTabularData('rpp','visits','getVisitsRows','username='+getCookie('username'))">  
 -->
 <body>
<div data-role="page">

	<div data-role="header">
	<h1 id="header">Resident Dashboard - </h1>
        <a href="logout.jsp" rel="external" data-role="button" data-inline="true" data-theme="c" class="ui-btn-right">Logout</a>
	</div><!-- /header -->

	<div data-role="content" data-inset="true">	
	
        <!--<form action="" method="POST"> action will tell the form what code to run when the submit button is pressed. Now it just redirects to the portal -->
        <div data-role="navbar">
	<ul>
            <li><a href="Visits.html" rel="external" class="ui-btn-active ui-state-persist">Visits</a></li>
            <li><a href="Reports.html" rel="external">Reports</a></li>
            <li><a href="Notes.html" rel="external">Notes</a></li>
			<li><a href="teams.html" rel="external">Admin</a></li>
	</ul>
	</div><!-- /navbar -->
        <!--</form> -->
        
	<br/>
        <a href="NewVisit.html" rel="external" data-theme="b" data-icon="plus" data-role="button">Add New Visit</a>
	<br />
	<div data-role="content">
	<div class="content-primary">
	
		<table id="mainData" cellpadding="10" width="100%" class="display">
		
		</table>
		
        
          </div><!--/content-primary -->	
		</div>
			
		<a href="NewVisit.html" rel="external" data-theme="b" data-icon="plus" data-role="button">Add New Visit</a>
		</div>
		
		
	<div data-role="footer">
	   <h4></h4>
	</div>

</div><!-- /page -->

</body>
</html>